<template>
    <view class="rx-tab">
        <view class="rx-title" v-if="portal.titleflg == true">{{getI18nTitleVal(portal, 'title')}}</view>
        <view class="rx-tab-head">
            <view class="rx-tab-name" v-for="(item,index) in tabList" @click="change(index)" :key="index">
                <view :class="[index==tabIndex?'rx-tab-head-lad-show':'rx-tab-head-lad-name']">{{getI18nTitleVal(item,'name')}}  </view>
                <span v-if="index==tabIndex && getI18nTitleVal(item,'name')" class="rx-tab-head-lad"></span>
            </view>
        </view>
        <template  v-for="(tabObj,index) in portal.tabs">
            <view class="rx-application" v-if="tabIndex == index">
                <view class="rx-application-en" @click="portalJump(obj)" v-for="(obj,index1) in tabObj.items">
                    <view class="rx-application-icon" v-if="portal.stylize=='img'">
                        <image v-if="obj.imgId" :src="imageUrl(obj.imgId)" alt="photo"/>
                        <image v-else src="@/static/mobile.png"/>
                    </view>
                    <view v-else :style="{'background':obj.bgColor}" class="rx-application-icon">
                        <i :class="['iconfont',obj.icon]"></i>
                    </view>
                    <span class="rx-application-span">{{ getI18nTitleVal(obj, 'title') }}</span>
                </view>
            </view>
        </template>
    </view>
</template>

<script>
/*
tab栏目
 */
import './RxGatewayCss.css'
import TokenUtil from "@/common/TokenUtil";
export default {
  name: "RxGridTab",
  data(){
    return{
      tabIndex:0,
      tabList: [],
    }
  },
  inject:['portalJump'],
  props: {
    portal: Object,
  },
  created(){
    this.initTab();
  },
  methods:{
    initTab(){
      this.tabList =[];
      for(let tab of this.portal.tabs){
        if(Object.keys(tab).length==0){
          continue;
        }
        this.tabList.push({name:tab.title,i18nJson:tab.i18nJson})
      }
    },
    change(index) {
      this.tabIndex = index;
    },
    getFilePath(fileId) {
      let token = TokenUtil.getToken();
      return "/api/api-system/system/core/sysFile/previewFile?fileId=" + fileId + "&accessToken=" + token;
    },
  }
}
</script>

<style scoped>
.rx-tab {
    border-radius: .5rem;
    background: #fff;
    width: calc(100% - 1rem);
    margin: 0.5rem auto;
    box-shadow: 0rem 0rem 0.2rem 0rem #dce0eb;
}

.rx-title {
    font-size: 1rem;
    padding: 0.7rem 1rem;
    letter-spacing: 0rem;
    color: rgba(51, 51, 51, 1);
}
.rx-tab-head{
    display: flex;
    padding:0.5rem 0.5rem 0rem .5rem;
    text-align: center;
    overflow: auto;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.rx-tab-name{
    margin:0rem .5rem;
    line-height: 2rem;
    font-size: 1rem;
}
.rx-tab-head-lad-show{
    color: #1890ff;
    font-size: 1rem;
}
.rx-tab-head-lad-name{
    font-size: 1rem;
}
.rx-tab-head-lad{
    width: 1rem;
    height: 0.2rem;
    background-color: #1890ff;
    border-radius: 2px;
    display: block;
    margin: auto;

}
.rx-application-en{
    overflow: hidden;
}
</style>
